<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Clock</title>
    <style>
        body,div{margin:0;padding:0;}
        body{background: #eee;}
        div{width:500px;height:500px;position: absolute;left:50%;top:50%;margin-left: -250px;margin-top: -250px;}
        canvas{background: #fff;}
    </style>
</head>
<body>
   <div>
       <canvas></canvas>
   </div>
</body>
<script>
    var canvas=document.querySelector("canvas");
    var div=document.querySelector("div");
    var w=canvas.width=div.offsetWidth;
    var h=canvas.height=div.offsetHeight;
    var ctx=canvas.getContext("2d");
    var r=w/2;
    //画表盘
    function draw(){
        ctx.save();//保存游戏记录
        ctx.beginPath();
        ctx.translate(r,r);//将00点移动到圆心
        ctx.lineWidth=3;
        ctx.arc(0,0,r-3,0,2*Math.PI);//ctx.arc(x,y,半径,起始弧度,结束弧度)
        ctx.stroke();
        ctx.closePath();

        var numbers=[3,4,5,6,7,8,9,10,11,12,1,2];
        ctx.font="15px Microsoft yahei";
        ctx.textAlign="center";
        ctx.textBaseline="middle";
        numbers.forEach(function(value,index){
            var road=index*30*Math.PI/180;
            //如何确定圆上的点呢？弧度*半径
            var y=Math.sin(road)*(r-30);
            var x=Math.cos(road)*(r-30);
            ctx.fillText(value,x,y);
        })

        for(var i=0;i<60;i++){
            ctx.beginPath();
            var road=i*6*Math.PI/180;
            var y=Math.sin(road)*(r-10);
            var x=Math.cos(road)*(r-10);
            if(i%5==0){
                ctx.arc(x,y,4,0,Math.PI*2);
                ctx.fillStyle="red";
            }else{
                ctx.arc(x,y,2,0,Math.PI*2);
                ctx.fillStyle="black";
            }
            ctx.fill();
        }
    }
    draw();

    function drawH(h){
        ctx.save();//保存当前游戏进度
        ctx.beginPath();
        ctx.lineWidth="20";
        ctx.lineCap="round";
        ctx.rotate(30*h*Math.PI/180);
        ctx.moveTo(0,0);
        ctx.lineTo(0,-r/4);
        ctx.stroke();
        ctx.restore();//回到之前的那个记录
    }
    function drawM(m){
        ctx.save();//保存当前游戏进度
        ctx.beginPath();
        ctx.lineWidth="8";
        ctx.lineCap="round";
        ctx.rotate(6*m*Math.PI/180);
        ctx.moveTo(0,0);
        ctx.lineTo(0,-r/1.5);
        ctx.stroke();
        ctx.restore();//回到之前的那个记录
    }
    function drawS(s){
        ctx.save();//保存当前游戏进度
        ctx.beginPath();
        ctx.lineWidth="4";
        ctx.lineCap="round";
        ctx.strokeStyle="red";
        ctx.rotate(6*s*Math.PI/180);
        ctx.moveTo(0,0);
        ctx.lineTo(0,-r/1.2);
        ctx.stroke();
        ctx.restore();//回到之前的那个记录
    }

    function drawPoint(){
        ctx.beginPath();
        ctx.fillStyle="#fff";
        ctx.arc(0,0,7,0,Math.PI*2);
        ctx.fill();
    }
    
    setInterval(function(){
        ctx.restore();
        ctx.clearRect(0,0,w,h);
        var mydate=new Date();
        draw();
        drawH(mydate.getHours());
        drawM(mydate.getMinutes());
        drawS(mydate.getSeconds());
        drawPoint();
        
    },1000);
</script>
</html>